<template>
    <div class="chart" :id="id"></div>
</template>

<script>
    import * as echarts from 'echarts';

    export default {
        name: 'echarts',
        props: ['id', 'scope'],
        mounted () {
            this.renderChart();
        },
        watch: {
            "scope": function () {
                this.renderChart();
            }
        },
        methods: {
            renderChart () {
                const currentTime = new Date();
                const year = currentTime.getFullYear();
                const month = currentTime.getMonth() + 1;
                const day = currentTime.getDate();

                // 从今天开始，倒退七天
                let daysArr = [];
                for (let i = 0; i < 7; i++) {
                    let date = new Date(currentTime);
                    date.setDate(currentTime.getDate() - i);

                    const formattedDate = String(date.getMonth() + 1).padStart(2, '0') + '-' +
                        String(date.getDate()).padStart(2, '0');

                    daysArr.push(formattedDate);
                }

                // 从本月开始，倒退七个月
                const monthsArr = [];
                for (let i = 0; i < 7; i++) {
                    let yy = year;
                    let mm = month - i;

                    // 处理跨年情况
                    if (mm <= 0) {
                        mm += 12;
                        yy -= 1;
                    }

                    // 格式化并存储年月
                    const formattedMonth = `${String(yy).slice(-2)}-${String(mm).padStart(2, '0')}`;
                    monthsArr.push(formattedMonth);
                }

                const option_day = {
                    title: {
                        text: `单位：kwh`,
                        left: 'left', // 标题放在左上角
                        top: 20, // 距离顶部 10px
                        textStyle: {
                            fontSize: 12,
                            color: '#fff', // 字体颜色为白色
                        },
                    },
                    grid: {
                        left: '1%',
                        right: '2%',
                        bottom: '10%',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                        },
                    },
                    xAxis: {
                        type: 'category',
                        data: daysArr.reverse(),
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                            },
                        },
                        axisLabel: {
                            fontSize: 12,
                            color: '#fff',
                        },
                    },
                    yAxis: [{
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed',
                                color: '#666',
                            },
                        },
                        axisLabel: {
                            fontSize: 12,
                            color: '#fff',
                        },
                    },
                    {
                        type: 'value',
                        name: '单位%',
                        position: 'right',
                        axisLabel: {
                            color: '#fff'
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed',
                                color: '#666',
                            },
                        },
                        axisLabel: {
                            fontSize: 12,
                            color: '#fff',
                        }
                    }],
                    series: [
                        {
                            name: 'XX1电站',
                            type: 'bar',
                            barWidth: 20,
                            data: [19, 26, 15, 10, 5, 18, 11],
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#3CF6FF' }, // 起始颜色
                                    { offset: 1, color: 'rgba(60,246,255,0.2)' }, // 结束颜色
                                ]),
                            },
                        },
                        {
                            name: '弃水电量同比',
                            type: 'line',
                            yAxisIndex: 1,
                            data: [100, 98, 102, 97, 98, 99, 104],
                            smooth: true,
                            areaStyle: {
                                color: 'rgba(0, 0, 0, 0.2)' // 添加阴影效果
                            },
                            lineStyle: {
                                color: '#1FD7B6' // 设置线条颜色
                            }
                        }
                    ],
                };

                const option_month = {
                    title: {
                        text: `单位：kwh`,
                        left: 'left', // 标题放在左上角
                        top: 20, // 距离顶部 10px
                        textStyle: {
                            fontSize: 12,
                            color: '#fff', // 字体颜色为白色
                        },
                    },
                    grid: {
                        left: '1%',
                        right: '2%',
                        bottom: '10%',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                        },
                    },
                    xAxis: {
                        type: 'category',
                        data: monthsArr.reverse(),
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                            },
                        },
                        axisLabel: {
                            fontSize: 12,
                            color: '#fff',
                        },
                    },
                    yAxis: [{
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed',
                                color: '#666',
                            },
                        },
                        axisLabel: {
                            fontSize: 12,
                            color: '#fff',
                        },
                    },
                    {
                        type: 'value',
                        name: '单位%',
                        position: 'right',
                        axisLabel: {
                            color: '#fff'
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed',
                                color: '#666',
                            },
                        },
                        axisLabel: {
                            fontSize: 12,
                            color: '#fff',
                        }
                    }],
                    series: [
                        {
                            name: 'XX1电站',
                            type: 'bar',
                            barWidth: 20,
                            data: [250, 200, 150, 100, 190, 95, 102],
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#3CF6FF' }, // 起始颜色
                                    { offset: 1, color: 'rgba(60,246,255,0.2)' }, // 结束颜色
                                ]),
                            },
                        },
                        {
                            name: '弃水电量同比',
                            type: 'line',
                            yAxisIndex: 1,
                            data: [98, 101, 102, 99, 100, 98, 97],
                            smooth: true,
                            areaStyle: {
                                color: 'rgba(0, 0, 0, 0.2)' // 添加阴影效果
                            },
                            lineStyle: {
                                color: '#1FD7B6' // 设置线条颜色
                            }
                        }
                    ],
                };

                const option_year = {
                    title: {
                        text: `单位：kwh`,
                        left: 'left', // 标题放在左上角
                        top: 20, // 距离顶部 10px
                        textStyle: {
                            fontSize: 12,
                            color: '#fff', // 字体颜色为白色
                        },
                    },
                    grid: {
                        left: '1%',
                        right: '2%',
                        bottom: '10%',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                        },
                    },
                    xAxis: {
                        type: 'category',
                        data: [year - 4, year - 3, year - 2, year - 1, year],
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                            },
                        },
                        axisLabel: {
                            fontSize: 12,
                            color: '#fff',
                        },
                    },
                    yAxis: [{
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed',
                                color: '#666',
                            },
                        },
                        axisLabel: {
                            fontSize: 12,
                            color: '#fff',
                        },
                    },
                    {
                        type: 'value',
                        name: '单位%',
                        position: 'right',
                        axisLabel: {
                            color: '#fff'
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed',
                                color: '#666',
                            },
                        },
                        axisLabel: {
                            fontSize: 12,
                            color: '#fff',
                        }
                    }],
                    series: [
                        {
                            name: 'XX1电站',
                            type: 'bar',
                            barWidth: 20,
                            data: [950, 720, 1150, 1000, 150],
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#3CF6FF' }, // 起始颜色
                                    { offset: 1, color: 'rgba(60,246,255,0.2)' }, // 结束颜色
                                ]),
                            },
                        },
                        {
                            name: '弃水电量同比',
                            type: 'line',
                            yAxisIndex: 1,
                            data: [92, 103, 100, 97, 102],
                            smooth: true,
                            areaStyle: {
                                color: 'rgba(0, 0, 0, 0.2)' // 添加阴影效果
                            },
                            lineStyle: {
                                color: '#1FD7B6' // 设置线条颜色
                            }
                        }
                    ],
                };

                var myChart = echarts.init(document.getElementById(this.id))
                myChart.clear();
                if (this.scope == "date") {
                    myChart.setOption(option_day);
                } else if (this.scope == "month") {
                    myChart.setOption(option_month);
                } else {
                    myChart.setOption(option_year);
                }

                window.addEventListener('resize', () => {
                    myChart.resize();
                });
            },
        },
    };
</script>

<style scoped>
    .chart {
        width: 100%;
        height: 100%;
    }
</style>